<template>
  <div class="container">
    <Card shadow>
      <apply-form
        v-if="expType === 'COURSE'"
        ref="applyForm"
        v-bind.sync="interactiveData"
        :pdfData="pdfData"
        :isModified="true"
        @hide-spin="hideSpin"
        v-on:update:submitLoading="interactiveData.submitLoading = $event"
        v-on:update:teacher_code="interactiveData.teacher_code = $event"
        v-on:update:course_code="interactiveData.course_code = $event"
        v-on:saveSuccess="saveSuccess">
      </apply-form>
      <apply-training
        v-if="expType === 'TRAINING'"
        ref="applyTraining"
        v-bind.sync="interactiveData"
        :pdfData="pdfData"
        :isModified="true"
        @hide-spin="hideSpin"
        v-on:update:submitLoading="interactiveData.submitLoading = $event"
        v-on:saveSuccess="saveSuccess">
      </apply-training>
      <div id="actions" class="text-center position-relative">
        <Poptip
            confirm
            title="确定修改申请表吗？"
            word-wrap
            width="180"
            @on-ok="submitButton"
            class="text-left"
            :options="popperOpts">
            <Button type="success" :loading="interactiveData.submitLoading" class="mr-20">
              <span v-if="!this.interactiveData.submitLoading">提交表单</span>
              <span v-else>提交中...</span>
            </Button>
        </Poptip>
        <Poptip
            confirm
            title="数据将不可恢复，确定重置表单吗？"
            word-wrap
            width="180"
            @on-ok="resetButton"
            class="text-left"
            :options="popperOpts">
          <Button style="margin-left: 8px" :disabled="this.interactiveData.submitLoading">重置表单</Button>
        </Poptip>
      </div>
    </Card>
  </div>
</template>
<script>
import ApplyForm from '_c/apply-form'
import ApplyTraining from '_c/apply-training'
import { on, off } from '@/libs/tools'
import { getFormDetailByCode } from '@/api/apply-form'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faFilePdf, faTable } from '@fortawesome/free-solid-svg-icons'

library.add(faFilePdf)
library.add(faTable)

export default {
  components: {
    // 使用 key: value 的形式注册 value 组件，并命名为 key
    'apply-form': ApplyForm,
    'apply-training': ApplyTraining
  },
  props: {
    // 要修改的申请表的类型，COURSE为普通申请表，TRAINING为实训申请表
    expType: {
      type: String,
      default: 'COURSE'
    },
    appCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      btnSize: 'default',
      interactiveData: {
        submitLoading: false,
        teacher_code: null,
        course_code: null
      },
      popperOpts: {
        modifiers: {
          preventOverflow: {
            // 边界元素: scrollParent, window, viewport or any DOM element. 默认iview默认window
            boundariesElement: 'scrollParent'
          }
        }
      },
      pdfData: {}
    }
  },
  created: function () {
    this.getPastFormByCode(this.appCode)
  },
  methods: {
    submitButton () {
      this.$refs[this.formName].handleSubmit(this.formName)
    },
    resetButton () {
      this.$refs[this.formName].handleReset(this.formName)
    },
    // 通过appCode获取历史申请表的详细信息
    async getPastFormByCode (code) {
      try {
        let res = await getFormDetailByCode(code)
        res = res.data
        if (res.code) {
          let formData = res.data
          this.$refs[this.formName].fillFormByData(formData)
        } else {
          this.$Message.error('抱歉，获取登记表信息失败，请刷新后重试')
        }
      } catch (error) {
        console.log(error)
        this.$Message.error('抱歉，获取登记表信息失败，请刷新后重试')
      }
    },
    saveSuccess (isModified) {
      if (isModified) {
        this.$emit('saveSuccess')
      }
    },
    hideSpin () {
      this.$Spin.hide()
    },
    resizeSubComponents () {
      this.$children[0].$el.children[0].style.minHeight = this.$parent.$el.clientHeight - 36 + 'px'
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.resizeSubComponents()
      on(window, 'resize', this.resizeSubComponents)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resizeSubComponents)
  },
  computed: {
    formName: function () {
      return this.expType === 'COURSE' ? 'applyForm' : 'applyTraining'
    }
  }
}
</script>

<style lang="less">
  @import 'edit-applied-form.less';
</style>
